<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- saved from url=(0014)about:internet -->
    <link type="text/css" rel="stylesheet" href="css/boot.css" media="all">
    <title>Jam-Demo</title>
    <link rel="Stylesheet" type="text/css" href="google-code-prettify/prettify.css" />
    <script type="text/javascript"  src="google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="../js/jam.js"></script>
    <script type="text/javascript">
        $(function(){
            prettyPrint();

            var a = $('#a1').animate({
                to: {left: '@+300px'},
                sec: 500,
                onStop:function() { alert('stop'); },
                onStart:function() { alert('start'); }
            });
            $('#btn1').click(function () {
                a.start();
            });
            $('#btn2').click(function () {
                a.pause();
            });

        });
    </script>
</head>
<body style="overflow-x: hidden">

    <h3>$(expr).animate(config)</h3>
    <h5>参数说明</h5>
    <pre class="prettyprint">
        config = {
            from : { } // css object ,定义动画相关css属性的初始值
            to : { } // css object ,定义动画相关css属性的结束值
            sec : number // 动画执行的毫秒数
            upgradeFunc : function(ctx,fn,fp) { .. } | null // 动画执行速度控制函数
            onStart : function() {} | null // 动画执行完成之前的回调函数
            onStop : function() {} | null // 动画执行完成之后的回调函数
        }
    </pre>
    <h5>返回值 &lt; <a href="animate-object.html">Animate Object</a> &gt; </h5>

    <h3>示例</h3>
    <div style="width: 100%;height: 100px;padding: 10px;position: relative">
        <div id="a1" style="position: absolute;width: 100px;height: 80px;left: 0;top:0;background: green">

        </div>
    </div>

    <button id="btn1" value="start!">start!</button>
    <button id="btn2" value="start!">pause!</button>

    <pre class="prettyprint linenums">
            var a = $('#a1').animate({
                to: {left: '@+300px'}, // @+,@- 表示相对当前值增加或减少，这时可以不设置from
                sec: 500,
                onStop:function() { alert('stop'); },
                onStart:function() { alert('start'); }
            });
            $('#btn1').click(function () {
                a.start();
            });
            $('#btn2').click(function () {
                a.pause();
            });
    </pre>



<script type="text/javascript" src="boot.js"></script>
</body>
</html>